<template>
	<div>
		<Search></Search>
		<Banner :banners="banners" style="margin-top:1rem"></Banner>
		<Type></Type>
		<div class="section">
			<SectionTitle type="recommend"></SectionTitle>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="recommend-item swiper-slide" v-for="goods in recommendGoods">
						<GoodsItem :goods="goods"></GoodsItem>
					</div>
				</div>
			</div>
		</div>
		<div class="section clear">
			<SectionTitle type="hot"></SectionTitle>
			<div class="hot-item" v-for="(goods,i) in hotGoods">
				<GoodsItem :goods="goods"></GoodsItem>
			</div>
		</div>
	</div>
</template>
<script>
import Search from '@/components/Search'
import Banner from './Banner'
import Type from './Type'
import SectionTitle from './SectionTitle'
import GoodsItem from '@/components/GoodsItem'
import 'swiper/src/swiper.less'
import Swiper from 'swiper'
import { mapGetters, mapActions } from 'vuex'
import { Indicator} from 'mint-ui'
export default {
	name: 'Homepage',
	computed: mapGetters({
	   banners: 'banners',
	   recommendGoods: 'recommendGoods',
	   hotGoods: 'hotGoods'
	 }),
	async created(){
		Indicator.open()
		await this.$store.dispatch('getBanners');
		await this.$store.dispatch('getHotGoods');
		// const node = document.querySelector('.mint-indicator')
		// node.parentNode.removeChild(node)
		Indicator.close()
	},
	watch:{
		recommendGoods(){
			this.$nextTick(() => {
				new Swiper('.section .swiper-container', {
					autoplay: {
					    delay: 2000,
					    disableOnInteraction: false,
					},
					slidesPerView: 2,
					slidesPerGroup: 2
				})
			})
		}
	},
	components:{Search, Banner, Type, SectionTitle, GoodsItem}
}
</script>
<style lang='less' scoped>
.section{
	margin-top: .27rem;
	background: #fff;
	padding: .1rem 0;
}
.recommend-item{
	border-right: 1px solid #ddd;
}
.swiper-slide{
	width: 4.93rem;
	display: inline-block;
}
.hot-item{
	/*单数项。这里明明应该是2n+1才对啊…*/
	&:nth-child(2n){
		margin-right: .1rem;
	}
	width: 4.93rem;
	border-bottom: 0.03rem solid #bbb;
	display: inline-block;
}
</style>
